<md-sidenav class="menu md-sidenav-left md-whiteframe-z2" layout="column"
  ng-class="{ 'under-mask': !conversation.isMenuOpen } "
  md-component-id="menu"
  md-is-open="conversation.isMenuOpen"
  md-is-locked-open="$mdMedia('gt-sm') || !currentConversation">
  <div flex layout="column" style="overflow:auto;">
    <div class='logo'>LeanMessage</div>
    <md-list flex>

      <!-- Robots List-->
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">服务号</md-subheader>
      <md-list-item
              ng-repeat="conv in sysConvs | orderBy:'-lastMessageAt' track by conv.id"
              ng-click="changeTo(conv)"
              ng-class="{'active': conv.id === currentConversation.id}">
        <p layout="row" layout-align="center center">
          {{::conv.name}}
          <span class="last-message" flex>{{conv.lastMessage.summary}}</span>
          <span ng-if="conv.unreadMessagesCount" class="unreadCount">{{conv.unreadMessagesCount}}</span>
        </p>
      </md-list-item>
      <div class="empty-list-hint" layout-padding>此应用还未创建系统对话</div>
      <!-- Robots List End -->

      <!-- Transiant Convsations List-->
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">聊天室</md-subheader>
      <md-list-item
              ng-repeat="conv in transConvs | orderBy:'-lastMessageAt' track by conv.id"
              ng-click="changeTo(conv)"
              ng-class="{'active': conv.id === currentConversation.id}">
        <p layout="row" layout-align="center center">
          {{::conv.name}}
          <span class="last-message" flex>
            <span ng-if="conv.mentioned" class="mentioned">有人@你</span>
            {{conv.lastMessage.from}}<span ng-if="conv.lastMessage.from">: </span>{{conv.lastMessage.summary}}
          </span>
          <span ng-if="conv.unreadMessagesCount" class="unreadCount">{{conv.unreadMessagesCount}}</span>
        </p>
      </md-list-item>
      <div class="empty-list-hint" layout-padding>此应用还未创建聊天室</div>
      <!-- Transiant Convsations List End -->

      <!-- Group Conversations List -->
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">群聊</md-subheader>
      <md-list-item
        ng-repeat="conv in normalConvs | orderBy:'-lastMessageAt' track by conv.id"
        ng-if="(conv.members.length > 2)"
        ng-click="changeTo(conv)"
        ng-class="{'active': conv.id === currentConversation.id}">
        <p layout="row" layout-align="center center">
          {{conv.name || '群 ' + conv.id.slice(-4) }}
          <span class="last-message" flex>
            <span ng-if="conv.unreadMessagesMentioned" class="mentioned">有人@你</span>
            {{conv.lastMessage.from}}<span ng-if="conv.lastMessage.from">: </span>{{conv.lastMessage.summary}}
          </span>
          <span ng-if="conv.unreadMessagesCount" class="unreadCount">{{conv.unreadMessagesCount}}</span>
        </p>
      </md-list-item>
      <div class="empty-list-hint" layout-padding>在单聊中邀请成员开始群聊</div>
      <!-- Group Conversations List End -->

      <!-- Single Conversations List -->
      <md-divider></md-divider>
      <md-subheader class="md-no-sticky">单聊</md-subheader>
      <md-list-item
        ng-repeat="conv in normalConvs | orderBy:'-lastMessageAt' track by conv.id"
        ng-if="conv.members.length === 2"
        ng-click="changeTo(conv)"
        ng-class="{'active': conv.id === currentConversation.id}">
        <p layout="row" layout-align="center center">
          {{getSingleConvTarget(conv.members)}}
          <span class="last-message" flex>{{conv.lastMessage.summary}}</span>
          <span ng-if="conv.unreadMessagesCount" class="unreadCount">{{conv.unreadMessagesCount}}</span>
        </p>
      </md-list-item>
      <div class="empty-list-hint" layout-padding>在聊天窗口点击任意用户 ID 开始单聊</div>
    </md-list>
  </div>
  <!-- Single Conversations List End -->

  <!--Personal Info-->
  <md-divider></md-divider>
  <div class="user" layout layout-align="center center" layout-padding>
    <!--<img gravatar-src-once="transientEmail" gravatar-size="40">-->
    <span flex>当前用户：{{imClient.id}}</span>
    <md-button class="md-icon-button" aria-label="Logout" ng-click="logout()">
      <md-icon>exit_to_app</md-icon>
    </md-button>
  </div>
  <!--Personal Info End-->
</md-sidenav>

<!-- Nested Views for conversations.message -->
<div layout flex ui-view>
  <a href="https://github.com/leancloud/leanmessage-demo" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>    
</div>

<!-- NetWorkErrorMask -->
<div class="network-error" layout="column" layout-align="center center" ng-if="networkError">
  <md-icon>{{ networkErrorIcon }}</md-icon>
  <div>
    {{ networkError }}
    <md-button ng-click="retry()" ng-if="networkShowRetry">立即重试</md-button>
  </div>
</div>